<template>
  <div class="content">
    <!-- 产品首页标题 -->
    <div class="grid-content">
      <div class="left">
        <div><i class="iconfont icon-dianhua-copy text-white"></i><span>0898-036373861</span></div>
        <div><i class="iconfont icon-youjian-copy text-white"></i><span>12543672323@qq.com</span></div>
        <div><i class="iconfont icon-time text-white"></i><span>随时服务</span></div>
      </div>
      <div class="right">
        <div class="flex items-center">
          <i class="iconfont icon-toright text-white first-i"></i>
          <span>赶快联系我们</span>
          <i class="iconfont icon-toleft text-white"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>

.content{
  width: 100%;
  background-color: #474747;
}


.grid-content {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  .left {
    width: 60%;
    display: flex;
    &>div {
      margin: 0 0 0 5px;
      >span {
        font-size: 16px;
        color: #fff;
        margin: 0 0 0 2px;
      }
    }
  }

  .right {
    width: 15%;
    margin-left: auto;
    &>div {
      flex: auto;
      .icon-toright{
        margin-left: auto ;
      }
      >span {
        font-size: 16px;
        color: #fff;
        margin: 0 0 0 2px;
      }
    }
  }
}



@media screen and (min-width: 601px) and (max-width:999px) {
  .grid-content {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  .left {
    width: 60%;
    display: flex;
    &>div {
      margin: 0 0 0 5px;
      >span {
        font-size: 10px;
        color: #fff;
        margin: 0 0 0 2px;
      }
    }
  }

  .right {
    width: 25%;
    margin-left: auto;
    &>div {
      flex: auto;
      .icon-toright{
        margin-left: auto ;
      }
      >span {
        font-size: 10px;
        color: #fff;
        margin: 0 0 0 2px;
      }
    }
  }
}
}

@media screen and (max-width:600px) {
  .grid-content {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  .left {
    width: 50%;
    display: block;
    &>div {
      flex: auto;
      >span {
        font-size: 12px;
        color: #fff;
        margin: 0 0 0 2px;
      }
    }
  }

  .right {
    width: 35%;
    &>div {
      flex: auto;
      >span {
        font-size: 12px;
        color: #fff;
      }
    }
  }
}
}

</style>